<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="日程安排,FullCalendar,jquery实例">
<meta name="description" content="Helloweba，在线演示HTML、CSS、jquery、PHP示例DEMO。">
<title>演示：日程安排FullCalendar</title>
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
</head>

<body>
<style>
.hh_date {overflow:hidden;zoom:1;box-sizing:border-box;border:solid 3px #6cd3fb;font-family:Microsoft Yahei;}
.hh_date ul,
.hh_date li {list-style: none;margin:0;padding: 0;}
.hh_date .h_left{float:left;width: 70%;background:#fff;}
.hh_date .h_right{background:#6cd3fb;float:right;width: 30%;height:100%;color: #fff;overflow-y:auto;text-align: center;padding:10px;box-sizing:border-box;}
.hh_date .h_right .h_hd{line-height:30px;}
.hh_date .h_right .h_date{background:#FFBB00;padding:10px 20px;display:inline-block;font-size: 50px;box-sizing:border-box;}
.hh_date .h_right .h_tips{display: none;}
.hh_date .h_right .h_one {text-align: left;}
.hh_date .h_right .h_one .h_h1{background:rgba(255,255,255,0.1);text-align: center;margin:10px 0;padding: 5px 0;}
.hh_date .h_right .h_one ul{}
.hh_date .h_right .h_one ul li{border-bottom: solid 1px rgba(255,255,255,0.3);padding: 10px 0}
.hh_date .h_right .h_one ul li .h_row{}
</style>

<div class="hh_date" id="J_date">
	<div class="h_left">
		<div id='calendar'></div>
	</div>
	<div class="h_right">
		<div class="h_hd">请在左边选择日期</div>
		<div class="h_date">--</div>
		<div class="h_tips">空白提示</div>
		<div class="h_con">

		</div>
	</div>
</div>
<script type="text/javascript">
$(function() {
	// 后台返回数据
	arrAjax = [{
		"id": 6,
		"cleaner_id": 5,
		"work_year": 2017,
		"work_month": 8,
		"work_day": 2,
		"work_time": 9,
		"service_id": 2,
		"fullname": "顶戴",
		"title": "顶戴枯1",
		"cell_name": "金碧花园"
	}, {
		"id": 5,
		"cleaner_id": 5,
		"work_year": 2017,
		"work_month": 8,
		"work_day": 1,
		"work_time": 9,
		"service_id": 2,
		"fullname": "顶戴",
		"title": "顶戴枯1",
		"cell_name": "金碧花园"
	}, {
		"id": 4,
		"cleaner_id": 6,
		"work_year": 2017,
		"work_month": 8,
		"work_day": 4,
		"work_time": 9,
		"service_id": 1,
		"fullname": "李森",
		"title": "顶戴枯1",
		"cell_name": "金碧花园"
	}, {
		"id": 3,
		"cleaner_id": 6,
		"work_year": 2017,
		"work_month": 8,
		"work_day": 3,
		"work_time": 9,
		"service_id": 1,
		"fullname": "李森",
		"title": "顶戴枯1",
		"cell_name": "金碧花园"
	}, {
		"id": 2,
		"cleaner_id": 6,
		"work_year": 2017,
		"work_month": 8,
		"work_day": 2,
		"work_time": 14,
		"service_id": 2,
		"fullname": "李森",
		"title": "顶戴枯1",
		"cell_name": "金碧花园"
	}, {
		"id": 1,
		"cleaner_id": 6,
		"work_year": 2017,
		"work_month": 8,
		"work_day": 1,
		"work_time": 9,
		"service_id": 1,
		"fullname": "李森",
		"title": "顶戴枯1",
		"cell_name": "金碧花园"
	}];

	// 标记每月数据是否加载
	var queue=[];
	// 后台返回的每月数据拼起来
	var arrLoadMohtn=[];

	// 取某月天数
	function getDaysInOneMonth(year, month) {
		month = parseInt(month, 10);
		var d = new Date(year, month, 0);
		return d.getDate();
	}
	// 从后台返回数据中取指定天数数据
	function filterData(arr,date){
		var year=date.split('-')[0];
		var day=date.split('-')[2];
		var month=date.split('-')[1];
		var r={
			h24:[],//全天
			h08:[],//上午
			h14:[] //下午
		}
		for (var i = 0; i < arr.length; i++) {
			if (
				arr[i].work_year == year &&
				arr[i].work_month == month &&
				arr[i].work_day == day
			) {
				r.h24.push(arr[i]);
				if (arr[i].work_time==9) {
					r.h08.push(arr[i]);
				}else{
					r.h14.push(arr[i]);
				};
			};
		};
		return r;
	};
	//时间戳转日期格式
	function formatDate(timea) {
		var now = new Date(timea);
		var year = now.getFullYear();
		var month = (now.getMonth() + 1).toString();
		var date = now.getDate().toString();
		var hour = now.getHours().toString();
		var minute = now.getMinutes().toString();
		var second = now.getSeconds().toString();
		return year + "-" + month + "-" + date;
	};
	// 初始化日期插件
	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();
	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		firstDay: 1,
		editable: true,
		timeFormat: 'H:mm',
		axisFormat: 'H:mm',
		events: [],
		// 每天点击事件
		dayClick: function(date, allDay, jsEvent, view) {
			date = formatDate(date);
			$('#J_date .h_hd').text(date);
			$('#J_date .h_date').text(date.split('-')[2]);
			// 获取当前天数据
			var data=filterData(arrLoadMohtn,date);
			var html08='';
			for (var i = 0; i < data.h08.length; i++) {
				var o=data.h08[i];
				html08+=`
					<li>
						<div class="h_row">姓名：`+o.fullname+`</div>
						<div class="h_row">场地：`+o.cell_name+`</div>
						<div class="h_row">标题：`+o.title+`</div>
					</li>
				`;
			};
			html08='<ul>'+html08+'</ul>';
			if (data.h08.length==0) {
				html08='<ul>无人员安排</ul>';
			};
			var html14='';
			for (var i = 0; i < data.h14.length; i++) {
				var o=data.h14[i];
				html14+=`
					<li>
						<div class="h_row">姓名：`+o.fullname+`</div>
						<div class="h_row">场地：`+o.cell_name+`</div>
						<div class="h_row">标题：`+o.title+`</div>
					</li>
				`;
			};
			html14='<ul>'+html14+'</ul>';
			if (data.h14.length==0) {
				html14='<ul>无人员安排</ul>';
			};
			var html=`
				<div class="h_one">
					<div class="h_h1">上午</div>
					`+html08+`
				</div>
				<div class="h_one">
					<div class="h_h1">下午</div>
					`+html14+`
				</div>
			`
			$('#J_date .h_con').empty().append(html);
		}
	});
	// 在日历中标记一个月的数据
	function addDataInDate(pYear,pMonth,arr){
	    var json=arr;
		var purYear=pYear;
		var purMonth=pMonth;
		var days=getDaysInOneMonth(purYear,purMonth);
		// 生成显示到日历每天的数据
		var showList=[];
		for (var i = 1; i <= days; i++) {
			var date = purYear + '-' + purMonth + '-' + i;
			var dataDate = filterData(arrAjax, date);
			if (dataDate.h24.length > 0) {
				showList.push({
					title: dataDate.h24.length + '人',
					start: date
				});
			};
		};
		// 每日数据渲染到日历上
		$('#calendar').fullCalendar('addEventSource', showList);
		// 数组合并成一条，给每天数据点击调用
		arrLoadMohtn = arrLoadMohtn.concat(arr);
		// 添加标记，避免重复加载
		queue.push(purYear+'-'+purMonth);
	};
	// 远程获取一个月数据，并标记到日历
	function ajaxMonth(year,month){
		// 不加载已加载过的月份
		if (queue.indexOf(year+'-'+month)>-1) {
			return false;
		};
	    // 获取此月数据
		setTimeout(function(){
			var json=arrAjax;
			addDataInDate(year,month,json);
		},100);
	};

	// 当前月
	function nowMonth(){
		var date=formatDate(  new Date().getTime()  );
		var year=date.split('-')[0];
		var day=date.split('-')[2];
		var month=date.split('-')[1];
	    ajaxMonth(year,month);
	}
	nowMonth();
	// 下一月
	$('body').on('click', '.fc-button-next', function(event) {
		var date=formatDate(  $('#calendar').fullCalendar('getDate')   );
		var year=date.split('-')[0];
		var day=date.split('-')[2];
		var month=date.split('-')[1];
		ajaxMonth(year,month);
	});
	// 上一月
	$('body').on('click', '.fc-button-prev', function(event) {
		var date=formatDate(  $('#calendar').fullCalendar('getDate')   );
		var year=date.split('-')[0];
		var day=date.split('-')[2];
		var month=date.split('-')[1];
		ajaxMonth(year,month);
	});
	setTimeout(function(){
		var height=$('.hh_date').height();
		$('.hh_date .h_right').css({
			height:height+'px'
		});
	},1);
});
</script>
</body>
</html>
